<template>
    <div style="height: 100%;">
        <Create v-if="comType == 1" :contract_id="contract_id"></Create>
        <Sign v-if="comType == 2" :contract_id="contract_id" :user_id="comUserId" :user_type="comUserType"></Sign>
        <View v-if="comType == 3" :contract_id="contract_id" :user_id="comUserId"></View>
        <Lift v-if="comType == 4" :contract_id="contract_id" :user_id="comUserId"></Lift>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch ,nextTick} from "vue";
import { useRouter, useRoute } from 'vue-router';
import Create from "./components/detailCom1.vue";//发起
import Sign from "./components/detailCom2.vue";//签署
import View from "./components/detailCom3.vue";//查看
import Lift from "./components/detailCom4.vue";//解约
const route = useRoute();
const contract_id = ref('');
const comType = ref(0);
const comUserId = ref('');
const comUserType = ref(0);

onMounted(async () => {
    await nextTick(); // 等待DOM渲染完成
    contract_id.value = route.params.id
    comType.value = route.params.type
    comUserId.value = route.params.userId
    comUserType.value = route.params.usertype
});

watch(
    () => route.params,
    (newParams) => {
        // 新参数生效后执行逻辑（如请求新数据）
        // 调用你的数据加载方法，传入新参数
        console.log(newParams)
        contract_id.value = newParams.id
        comType.value = newParams.type
        comUserId.value = newParams.userId
        comUserType.value = newParams.usertype
    },
    { immediate: true,deep: true  } // 初始化时立即执行一次（加载初始数据）
)

</script>
<style scoped></style>